<template>
	<!-- height: `${diameter}px`, -->
	<!-- :style="{width: '50px', top: `${top}px`, left: `${left}px` }" -->
	<view :style="{width: '100rpx', top: `${top}px`, left: `${left}px` }" @touchmove.stop.prevent="touchmove"
		@touchend.stop.prevent="touchend" @touchcancel.stop.prevent="touchcancel"
		:class="isRigthNav ? 'rightNav' : 'rightNav ac'" :animation="ballAnimation">
		<view class="btn more" v-if="!isRigthNav" @click="handleRetract"></view>
		<view :class="has_fav == 1 ? 'btn collect_ac ' : 'btn collect'" @click="doFav"></view>
		<view class="btn share" @click="handleOpenShare"></view>
		<view class="btn top" v-if="isTop" @click="goTop"></view>
		<view class="btn retract" @click="handleRetract">收起</view>
	</view>
</template>

<script>
	var curPoint = {
		x: 0,
		y: 0
	}; // 记录原点
	var startPoint = {};
	export default {
		name: "rightNav",
		props: ['has_fav', 'isTop'],
		data() {
			return {
				isRigthNav: false,
				top: 0,
				left: 0,
				isMove: false,
				ballAnimation: {},
				timeout: null,
				modile: {},
				diameter: 0,
				navHeight: 0,
				footerBtnHeight: 150
			};
		},
		watch: {
			isTop() {
				// this.positionNav()
			}
		},
		created() {
			this.modile = uni.getSystemInfoSync();
		},
		mounted() {
			this.positionNav()
		},
		methods: {
			handleRetract() {
				this.isRigthNav = !this.isRigthNav
			},
			positionNav() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query
						.select(".rightNav")
						.boundingClientRect()
						.exec(res => {
							this.navHeight = res[0].height
							this.diameter = 50
							this.top = (this.modile.safeArea.height / 2) + (this.navHeight / 2);
							this.left = this.modile.safeArea.width - this.diameter;
							let create = uni.createAnimation({
								duration: 0
							});
							create.translate('-50%').step();
							this.ballAnimation = create.export();
						})
				})
			},
			doFav() {
				this.$emit('doFav', this.has_fav)
			},
			handleOpenShare() {
				this.$emit('handleOpenShare')
			},
			// 返回顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			touchmove(e) {
				this.isMove = true;
				if (this.timeout != null) {
					clearTimeout(this.timeout);
					this.timeout = null;
				}
				var touch = e.touches[0] || e.changedTouches[0];
				this.left = touch.clientX;
				this.top = touch.clientY;
			},
			touchend(e) {
				if (!this.isMove) {
					return;
				}
				this.finish(e);
			},
			touchcancel(e) {
				if (!this.isMove) {
					return;
				}
				this.finish(e);
			},
			finish(e) {
				this.isMove = false;
				var touch = e.touches[0] || e.changedTouches[0];
				this.left = touch.clientX;
				this.top = touch.clientY;
				let x = '0';
				if (2 * this.left + this.diameter >= this.modile.safeArea.width) {
					this.left = this.modile.safeArea.width - this.diameter
					x = '-100%';
				} else {
					this.left = this.modile.safeArea.width - this.diameter
					x = '-100%';
					// this.left = this.modile.safeArea.left;
				}
				// console.log((this.top + this.navHeight), this.modile.safeArea.height)
				if ((this.top + this.navHeight) >= this.modile.safeArea.height) {
					console.log(111)
					this.top = this.modile.safeArea.height - this.navHeight - this.footerBtnHeight
				} else if (this.top <= 0) {
					console.log(222)
					this.top = this.modile.safeArea.top;
				}
				let create = uni.createAnimation({
					duration: 0
				});
				create.translate(x).step();
				this.ballAnimation = create.export();
				this.overBall();
			},
			overBall() {
				this.timeout = setTimeout(() => {
					this.timeout = null;
					let create = uni.createAnimation({
						duration: 0,
						timingFunction: 'linear'
					});
					if (this.left <= 0) {
						create.translate('50%').step();
						this.ballAnimation = create.export();
					} else {
						create.translate('-50%').step();
						this.ballAnimation = create.export();
					}

				}, 150);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rightNav {
		position: fixed;
		top: 900rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 14rpx;
		overflow: hidden;
		transition: all .3s;
		box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(173, 173, 173, 0.31);
		z-index: 100;

		&.ac {
			height: 100rpx;
			overflow: hidden;
			border-radius: 50%;
		}

		.btn {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #F2F2F2;

			&:last-child {
				border-bottom: none;
			}

			&.more {
				// 	width: 100rpx;
				// 	height: 100rpx !important;
				// 	border-radius: 50%;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: url('../../static/img/detail/navMore.png') center center no-repeat;
				background-size: 44rpx 44rpx;
			}

			&.collect {
				background: url('../../static/img/detail/collect.png') no-repeat center center;
				background-size: 40rpx 40rpx;
			}

			&.collect_ac {
				background: url('../../static/img/detail/collect_ac.png') no-repeat center center;
				background-size: 40rpx 40rpx;
			}

			&.share {
				background: url('../../static/img/detail/share.png') no-repeat center center;
				background-size: 35rpx 35rpx;
			}

			&.top {
				background: url('../../static/img/detail/top.png') no-repeat center center;
				background-size: 33rpx 20rpx;
			}

			&.retract {
				text-align: center;
				line-height: 110rpx;
				color: #3968F4;
				font-size: 28rpx;
			}
		}
	}
</style>